<template>
  <div class="container flex-col">
    <div class="w_full flex-col">
      <span class="title">用户排班列表</span>
      <div class="comm_border" style="margin-top: 16px; padding: 16px 0;">
        <div class="flex-row">
          <div class="w_full flex-row-center">
            <span class="label_title" style="margin-left: 24px">日期</span>
            <el-date-picker v-model="data.dtStart"
                            type="date"
                            placeholder="请输入日期"
                            value-format="YYYY-MM-DD"
                            format="YYYY-MM-DD"
                            size="large" class="date-picker"
                            style="margin-left: 12px;width: 200px"></el-date-picker>
            <span class="label_title" style="margin-left: 8px">至</span>
            <el-date-picker v-model="data.dtEnd"
                            type="date"
                            placeholder="请输入日期"
                            value-format="YYYY-MM-DD"
                            format="YYYY-MM-DD"
                            size="large" class="date-picker"
                            style="margin-left: 12px;width: 200px"></el-date-picker>

          </div>
          <div class="flex-row-center">
            <el-button class="search_btn_primary" type="primary" @click="click_search"
                       style="margin-right: 24px;">查询
            </el-button>
          </div>
        </div>
      </div>
      <div class="flex-row-center" style="margin-top: 24px">
        <el-button class="search_btn_primary" @click="click_edit">编辑</el-button>
      </div>
    </div>
    <div class="flex_1 comm_border flex" style="margin-top: 32px">
      <div class="flex_1 grid-container" style="padding: 16px;">
        <el-table :data="data.listUserSchedule" stripe style="width: 100%" border>
          <el-table-column prop="index" label="序号" width="60">
          </el-table-column>
          <el-table-column prop="userName" label="姓名" width="180">
          </el-table-column>
          <el-table-column :label="item" v-for="(item, index1) in data.userScheduleHeader" :key="item" align="center">
            <template #default="scope">
              <div v-for="(item2,index2) in scope.row.listScheduleShift">
                <span v-if="index1==index2">{{ item2.scheduleShiftName }}  </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="w_full ">
      <div class="flex-row-center w_full"
           style="flex-direction: row-reverse ;margin-top: 14px;height: 50px;">
        <el-pagination
            v-model:current-page="pager.currentPage"
            v-model:page-size="pager.pageSize"
            :page-sizes="[10,20,30,50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pager.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, shallowRef} from "vue";
import msg from "@/components/msg";
import {api_listScheduleUser} from "@/request/apis/shiftUserApi";
import {useUserStore} from "@/store/user";
import {UserSchedulesInfoVO} from "@/type/vo/UserSchedulesInfoVO";
import {differenceInDays} from "date-fns";
import router from "@/router";
import {dataAsString} from "@/utils/TimeUtil";

const userStore = useUserStore()
const officeCode = userStore.userInfo.officeCode;
const data = reactive({
  dtStart: '',
  dtEnd: '',
  listUserSchedule: Array<UserSchedulesInfoVO>(),
  userScheduleHeader: Array<string>()

})
const pager = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 10,
})

onMounted(async () => {
  data.dtEnd = dataAsString(new Date(), 'yyyy-MM-dd');
  const dt = new Date();
  dt.setDate(dt.getDate() - 10);
  data.dtStart = dataAsString(dt, 'yyyy-MM-dd');
  console.log(data.dtStart)
  console.log(data.dtEnd)
  await search_pri();
})

const click_edit = async () => {
  try {
    await router.push({
      path: '/scheduleEditUserView'
    })
    await search_pri();
    // 处理确认操作
  } catch (error) {
    // 处理取消操作
  }
}
const search_pri = async () => {
  const page = pager.currentPage;
  const limit = pager.pageSize;
  if (data.dtStart > data.dtEnd) {
    await msg.info('起始时间必须小于结束时间')
    return;
  }
  let days = differenceInDays(data.dtEnd, data.dtStart);
  if (days > 20) {
    await msg.info('日期不能超过20天');
    return;
  }
  const r = await api_listScheduleUser(data.dtStart, data.dtEnd, officeCode, page, limit);
  if (!r) {
    await msg.error("获取数据异常!");
    return;
  }
  if (r.code != 0) {
    await msg.error(`获取数据异常!  ${r.code} msg：${r.msg}`);
    return;
  }
  if (r.data.records) {
    for (let i = 0; i < r.data.records.length; i++) {
      r.data.records[i].index = i + 1;
      // r.data.records[i].createTimeStr = tickAsTimeString(r.data.records[i].createTime)
    }
  }
  data.listUserSchedule = r.data.records;
  let header = Array<string>();
  if (data.listUserSchedule.length > 0) {
    data.listUserSchedule.forEach(x => {
      x.listScheduleShift.forEach(y => {
        // console.log(y)
        if (y.scheduleShiftName == null) {
          // y.scheduleShiftName = '-';
        }
      })
    })
    let listUserScheduleElement = data.listUserSchedule[0];
    if (listUserScheduleElement.listScheduleShift) {

      listUserScheduleElement.listScheduleShift.forEach(x => {

        if (x.dtScheduleShift) {
          const dt = new Date(x.dtScheduleShift);
          header.push(dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate());
        }
      })
    }
  }
  data.userScheduleHeader = header;
  pager.total = r.data.total;
}

const click_search = async () => {
  await search_pri();
};

const handleSizeChange = async (val: number) => {
  await search_pri();
}
const handleCurrentChange = async (val: number) => {
  await search_pri();
}

</script>

<style scoped>

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, auto); /* 设置3行 */
  grid-template-columns: repeat(5, auto); /* 设置3列 */
}

.cell_in_grid {
  background-color: #c6c6c6;
}


.title {
  font-size: 24px;
  font-weight: 600;
  color: #0A1629;
  line-height: 28px;
}

.label_title {
  font-size: 16px;
  font-weight: 400;
  color: #595959;
  line-height: 24px;
}

.date-picker {
  height: 48px;
  color: black;
  background: #FFFFFF;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 1px solid #DCDCDC;
}

.el-scrollbar__view {
  height: calc(100% - 100px); /* 根据实际情况调整高度 */
}

.infinite-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  margin: 10px;
  color: var(--el-color-primary);
  overflow: hidden;
}

.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

.naireName {
  font-size: 20px;
  font-weight: 400;
  color: #0A1629;
  line-height: 24px;
}

.status {
  font-size: 16px;
  font-weight: 400;
  color: #0A1629;
  line-height: 24px;
  margin-left: 7px;
}

.btn1 {
  border: none;
  margin-left: 24px;
  width: auto;

  padding: 0;
}


</style>
